<template>
  <div>
    <mybutton>
      <!-- 如何指定插入到哪个坑？通过slot属性，并给它指定名字 -->
      <span slot="icon">🎨</span>
      <span slot="text">主要按钮</span>

      <!-- 2.6版本以后具名插槽的新写法 -->
      <!-- <template v-slot:icon>
        <span>😂</span>
      </template>
      <template v-slot:text>
        <span>新写法</span>
      </template> -->

      <!-- 
        slot-scope属性可以指定一个变量，用来获取子组件内部slot组件上面的属性
        它是一个对象
      -->
      <template slot-scope="scope">
        <h1>{{ scope.msg }}</h1>
      </template>

      <!-- 2.6版本以后的新写法 -->
      <!-- <template v-slot:default="scope">
        {{ scope.num }}
      </template> -->
    </mybutton>
  </div>
</template>
<script>
import mybutton from "./components/mybutton.vue";
export default {
  components: {
    mybutton,
  },
  data() {
    return {
      arr: [{ username: "jack" }, { username: "rose" }],
    };
  },
};
</script>
<style>
</style>